<template>
  <PageTabsBox :data="dataInfo" @searchBtn="getTbody" :tabs="[
    {
      label: '权限用户',
      value: 1,
    },
    {
      label: '权限配置',
      value: 2,
    },
    {
      label: '特殊权限',
      value: 3,
    },
  ]">
    <template #default="{ on }">
      <template v-if="on === 1">
        <TableBox :data="dataInfo.table" :margin="0">
          <template #search="{ search }">
            <ElFormItemBox label="" prop="likeWords">
              <ElInputBox :data="search" dataName="likeWords" placeholder="工号/姓名/手机号" />
            </ElFormItemBox>
          </template>
          <template #employeeSexName="{ row }">
            <ElTagBox :data="row.employeeSex" :options="options.sex" />
          </template>
          <template #accountState="{ row }">
            <ElTagBox :data="row.accountState" :options="options.state" />
          </template>
          <template #roleName="{ row }">
            <ElSelectBox :data="row" dataName="roleCode" :options="dataInfo.tabs.list" valueName="roleCode"
              labelName="roleName" :clearable="false" @changeBtn="(value: string) => {
                proxy.$api.SystemManage.BatchChangeUsersRole({
                  roleCode: value,
                  userIDs: [row.systemUserID]
                })
                  .then((res: any) => {
                    proxy.$message('修改成功');
                    getTbody();
                  })
                  .catch(() => { });
              }" />
          </template>
        </TableBox>
      </template>
      <template v-else-if="on === 2">
        <PermissionBox :data="dataInfo.permission" :roleCode="dataInfo.tabs.active">
          <ElSelectBox :data="dataInfo" dataName="copyRoleCode" :options="dataInfo.tabs.list" valueName="roleCode"
            labelName="roleName" placeholder="复制角色" @changeBtn="(value: string) => {
              proxy.$api.SystemManage.GetAccessDataBySystemRole({
                roleCode: value, //角色编码
              })
                .then((res: any) => {
                  dataInfo.permission = res;
                  dataInfo.copyRoleCode = ''
                  proxy.$message('复制成功');
                })
                .catch(() => { });
            }"></ElSelectBox>
        </PermissionBox>
      </template>
      <template v-else-if="on === 3">
        <TableBox :data="{
          thead: [
            {
              label: '权限名称',
              prop: 'specificPermissionEnName',
              align: 'left',
              width: 220,
            },
            {
              label: '权限描述',
              prop: 'specificPermissionDesc',
              align: 'left',
              width: null,
            },
            {
              label: '操作',
              prop: 'isHavePower',
              align: 'center',
              width: 120,
            },
          ],
          tbody: dataInfo.permissionSpecial
        }" :margin="0">
          <template #isHavePower="{ row }">
            <ElSwitchBox :data="row" dataName="isHavePower" @changeBtn="(value) => {
              proxy.$api.SystemManage.SaveRoleSpecificPermission({
                roleCode: dataInfo.tabs.active, //角色编码
                specificPermissionCodeList: dataInfo.permissionSpecial.map((el: any) => el.isHavePower ? el.specificPermissionCode : '')
              })
                .then((res: any) => {
                  proxy.$message('更新成功');
                })
                .catch(() => { });
            }" />
          </template>
        </TableBox>
      </template>
    </template>
  </PageTabsBox>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import PermissionBox from './PermissionBox.vue'; // 引入逻辑
import { useListComponent } from './pageTs'; // 引入逻辑
const { dataInfo, getTbody, options } = useListComponent();

</script>